<!-- <script setup>
import { ref } from 'vue';

// 定义响应式列表
const list = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '写代码' }
]);

// 添加事项
const addItem = () => {
  const input = document.querySelector('input');
  const newItem = input.value.trim();
  if (newItem) {
    const newId = list.value.length ? list.value[list.value.length - 1].id + 1 : 1;
    list.value.push({ id: newId, name: newItem });
    input.value = ''; // 清空输入框
  }
};

// 删除事项
const deleteItem = (id) => {
  list.value = list.value.filter(item => item.id !== id);
};
</script>

<template>
  <div>
    <div>
      <input type="text" placeholder="请输入待办事项" @keyup.enter="addItem">
      <button @click="addItem">添加</button>
    </div>

    <table border="1">
      <thead>
        <tr>
          <th>标识</th>
          <th>待办事项</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <a @click="deleteItem(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

a {
  color: red;
  cursor: pointer;
  text-decoration: underline;
}
</style> -->

<script setup>
import { ref } from 'vue'

// 定义列表数据
const list = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '写代码' }
])

// 定义新待办事项的名称
const newItemName = ref('')

// 定义添加待办事项的方法
const addItem = () => {
  if (newItemName.value.trim() === '') return;
  const newId = list.value.length > 0 ? Math.max(...list.value.map(item => item.id)) + 1 : 1;
  list.value.push({ id: newId, name: newItemName.value });
  newItemName.value = '';
};

// 定义删除待办事项的方法
const deleteItem = (id) => {
  list.value = list.value.filter(item => item.id !== id);
};
</script>

<template>
  <div>
    <div>
      <input type="text" v-model="newItemName" @keyup.enter="addItem"> <button @click="addItem">添加</button>
    </div>
    <table border="">
      <thead>
        <th>标识</th>
        <th>待办事项</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <a @click="deleteItem(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped></style>
